React Navigationのパフォーマンスを考える

React Navigation v5を使っている

パフォーマンスを考える

createNativeStackNavigatorを使うようにしたら、めちゃくちゃ速くなった

↑に書いたmrsekut.icon

現状の問題

作成中のアプリはページ数がかなり多く、またボトムタブを使用している

その際に、今表示されているページとは別の箇所も裏で多重に再描画されており、かなり動作が重くなってしまっている

新しくページを開くと、裏側で再描画されるページが増えていく

理想はどういう状況か

今見ているページを優先的にfetchなどをして

見ていないページもfetchしておく

ただ、見ていないページは再描画させない

対策案

focus系のhooksを使う

isFocuedとuseFocusEffect

Navigationコンポーネントの設定をする

lazyとか

memo化、useCallbackなどをする

基本的な話

#??

裏で描画されるのは、「そういうもの」なのか

「アプリなので」そういうもの、なのか

単純に実装の仕方が悪いのか

useIsFocusedとuseFocusEffectの使い分け

全ページで全部どっちかを使う感じなのか、使い分ける感じ7日

使い分けるならどういう意図なのか

useIsFocused

docs

フォーカスされているもののみを描画し、それ以外は描画させない

雑に書くと

code:ts

const Hoge = () => {

const isFocused = useIsFocused();

// ロジック

if(!isFocused) return null

return (<View />)

}

ほんまにこれでええんか？

これで良いならこれはdefaultで有るべきだと思ってしまうので、やっぱ違うのでは、と感じるmrsekut.icon

useFocusEffect

docs

Delaying effect until transition finishes

useEffectによるfetchと、アニメーションがコンフリクトする場合はInteractionManagerをつかおう

メモリ使用量に対するアプローチ

docs

enableScreens()書くだけ

これ何が変わったのかわからんmrsekut.icon

it is possible for each native platform to optimize the memory usage for screens that are under the view stack and also simplify the native node hierarchy.

メモリ使用量が変わっているらしい

#??

何をしている？

perf monitorのRAMを見ればいいの？

やったこと

モーダル系のコンポーネントを置く場所を修正した